<script setup lang="ts">
const routerCols = [
  { title: '属性', dataIndex: 'attr', width: 150 },
  { title: '类型', dataIndex: 'type', width: 120 },
  { title: '必填', dataIndex: 'required', width: 80 },
  { title: '描述', dataIndex: 'desc', ellipsis: true }
]
const routerRows = [
  {
    key: '1',
    attr: 'globalStyle',
    type: 'Object',
    required: '否',
    desc: '设置默认页面的窗口表现'
  },
  {
    key: '2',
    attr: 'pages',
    type: 'Array',
    required: '是',
    desc: '设置页面路径及窗口表现'
  },
  {
    key: '3',
    attr: 'easycom',
    type: 'Object',
    required: '否',
    desc: '组件自动引入规则'
  },
  {
    key: '4',
    attr: 'tabBar',
    type: 'Object',
    required: '否',
    desc: '设置底部 tab 的表现'
  },
  {
    key: '5',
    attr: 'condition',
    type: 'Object',
    required: '否',
    desc: '启动模式配置'
  },
  {
    key: '6',
    attr: 'subPackages',
    type: 'Array',
    required: '否',
    desc: '分包加载配置'
  },
  {
    key: '7',
    attr: 'preloadRule',
    type: 'Object',
    required: '否',
    desc: '分包预下载规则'
  },
  {
    key: '8',
    attr: 'leftWindow',
    type: 'Object',
    required: '否',
    desc: '大屏左侧窗口'
  },
  {
    key: '9',
    attr: 'topWindow',
    type: 'Object',
    required: '否',
    desc: '大屏顶部窗口'
  },
  {
    key: '10',
    attr: 'rightWindow',
    type: 'Object',
    required: '否',
    desc: '大屏右侧窗口'
  }
]
</script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1.1 简介</div>
        <div class="doc-text">
          <div class="doc-sub">1.1.1 概述</div>
          <div class="text">1、uniapp 是一款基于vue开发的前端框架</div>
          <div class="text">2、一套代码可发布多端平台，如微信、支付宝、百度、头条等</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.2 目录结构</div>
          <div class="text">1、一个uni-app工程，默认包含如下目录及文件：</div>
          <div class="text">
            <pre><code class="json">┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量</code></pre>
          </div>
          <div class="text">2、编译到时，static 会直接复制到最终的打包目录，不会打包编译</div>
          <div class="text">
            3、非 static 目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。
          </div>
          <div class="text">
            4、css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common
            目录下
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.3 页面内容构成</div>
          <div class="text">
            1、一个页面内，有3个根节点标签
            &lt;template&gt;&lt;script&gt;&lt;style&gt;，分别是模板组件区、脚本区、样式区
          </div>
          <div class="text">
            <pre><code class="vue">&lt;template&gt;&lt;/template&gt;
&lt;script&gt;
  export default { // 配置选项 }
&lt;/script&gt;
&lt;style scoped lang="scss" &gt;&lt;/style&gt;</code></pre>
          </div>
          <div class="text">2、vue2/3 template 内建议使用一个根元素</div>
          <div class="text">3、vue3版本建议使用setup组合式API开发。</div>
          <div class="text">4、style 建议使用scss/less语法编写样式</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.4 尺寸单位</div>
          <div class="text">uni-app 支持的通用 css 单位包括 px、rpx</div>
          <div class="text">1、px 即屏幕像素</div>
          <div class="text">
            2、rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx
            恰好为屏幕宽度
          </div>
          <div class="text">
            3、rpx
            是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px
            单位
          </div>
          <div class="text">
            4、如果开发者在字体或高度中也使用了 rpx
            ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大
          </div>
          <div class="text">5、rpx 不支持动态横竖屏切换计算，使用 rpx 建议锁定屏幕方向</div>
          <div class="text">
            6、宽度、高度、边距等自适应属性建议使用rpx，字体，边框等固定属性建议使用px
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.5 静态资源</div>
          <div class="text">
            1、template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径
          </div>
          <div class="text">
            1、style同样支持相对和和绝对路径，css使用@import url(路径)，scss使用@import '路径' 引入
          </div>
          <div class="text">2、@开头的图片资源绝对路径以及相对路径会经过 base64 转换规则校验</div>
          <div class="text">3、图片资源H5 平台，小于 4kb 的资源会被转换成 base64，其余不转</div>
          <div class="text">4、静态资源超过20KB的图片或文件建议通过外链的方式引入</div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">2.1 页面路由（pages.json）</div>
        <div class="doc-tab">
          <div class="tab">
            <a-table
              :columns="routerCols"
              :data-source="routerRows"
              bordered
              :pagination="false"
              size="small"
            ></a-table>
          </div>
          <!-- <div class="text">
            注意：以上表格字段均为选传字段，当sourceData有值时可不传任何字段，shopId和shopName传一即可
          </div> -->
        </div>
        <!-- <div class="doc-text"> -->
        <!-- <div class="doc-sub">2.1.1 配置项列表</div> -->
        <!-- <div class="text"> -->
        <!-- <pre><code class="json">属性           类型      必填   描述
globalStyle    Object     否    设置默认页面的窗口表现        
pages          Array      是    设置页面路径及窗口表现        
easycom        Object     否    组件自动引入规则        
tabBar         Object     否    设置底部 tab 的表现        
condition      Object     否    启动模式配置        
subPackages    Array      否    分包加载配置        
preloadRule    Object     否    分包预下载规则        
leftWindow     Object     否    大屏左侧窗口        
topWindow      Object     否    大屏顶部窗口        
rightWindow    Object     否    大屏右侧窗口</code></pre> -->
        <!-- </div> -->
        <!-- </div> -->
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">3.1 其他</div>
        <div class="doc-text">
          <div class="text">1、新建项目名称建议以uni开头，格式为uni-xxx</div>
          <div class="text">
            2、项目新建common文件用于存放公共模块如ajax.js、login.js、common.js等
          </div>
          <div class="text">
            3、静态资源小于10kb文件存放static/images，大于10kb文件建议存放服务器imageOnline文件
          </div>
          <div class="text">
            4、项目全局组件保存至根路径components中，子业务局部公用组件保存至子业务模块components
          </div>
          <div class="text">
            5、子业务关联文件须存放同一文件，公共资源除外且大小超过1.5MB或根据需求分包处理
          </div>
          <div class="text">
            6、文件夹命名以驼峰命名法为准，尽量做到简单明了，文件则建议使用短横线连接法命名
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text,
    .doc-tab {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .tab {
        margin-bottom: 10px;
      }
      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
    }
  }
}
</style>
